<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        html, body{width: 100%;height: 100%;overflow: hidden;background: #fff;}
        body{display: flex;flex-direction: row;justify-content: center;align-items: center;}
        /*canvas{width: 80%;height: 80%;}*/
    </style>
</head>
<body>
    <!--参考
    http://web.jobbole.com/87602/-->
    <canvas id="canvas"></canvas>

</body>
<script type="text/javascript">
    (function(){
        //粒子集合
        let triangles = [];
        let canvas = {};
        let params = {};
        let mouse = {};
        let flag = false;
        let url = '';
        var test = 10;

        canvas.obj = document.getElementById('canvas');
        canvas.w = canvas.obj.width = document.body.clientWidth;
        canvas.h = canvas.obj.height = document.body.clientHeight;
        canvas.ctx = null;

        //起始坐标
        params.x = canvas.w/2;
        params.y = canvas.h/2;
        params.r = 40;//半径

        //鼠标位置
        mouse.x = 0;
        mouse.y = 0;

        if(canvas.obj.getContext){
            canvas.ctx = canvas.obj.getContext('2d');


            //画三角形
            let num = 10;
            for(let i = 0; i < 180/num ; i++){
                let obj = {
                    posAngle: num*i,
                    angle: num,
                    count: 1,
                }

                triangles.push(obj);
            }

            animate();


        }

        /*
        * 动画
        * */
        function animate(){
            let speed = 20;
            let rotate = test / speed;
            let diretion = 1;//正负方向

            canvas.ctx.clearRect(0,0,canvas.w,canvas.h)

            //画圆
            canvas.ctx.strokeStyle="#eaeaea";

            drawCircle(params.x, params.y, params.r)
            drawCircle(params.x, params.y, 2 * params.r)

            canvas.ctx.beginPath();

            for(let i = 1; i < triangles.length; i++){
                let angle = 0;

                triangles[i].count = triangles[i].count + rotate;
                angle = triangles[i].count + triangles[i].posAngle;

                drawMove(params.x, params.y, params.r, angle * diretion);
                diretion = diretion == 1 ? -1 : 1;
            }
            canvas.ctx.fill();

            requestAnimationFrame(animate);
        }

        /*
        * 画圆
        * */
        function drawCircle(x,y,r){
            canvas.ctx.beginPath();
            canvas.ctx.arc(x, y, r, 0, 2*Math.PI);
            canvas.ctx.stroke();
        }

        /*
        * 画等边三角形
        * @x:横坐标
        * @y:纵坐标
        * @r:圆心
        * @angle:三角形旋转角度
        * */
        function drawMove(x,y,r, angle){
            //圆心到三角形的顶点距离
            let len = parseInt( r / Math.sin(30*(2*Math.PI/360)) );
            //三角形的边1/2
            let triangle = parseInt( len * Math.cos(30*(2*Math.PI/360)) ) ;

            //三角形三个顶点坐标
            let p1 = dealAngle(angle),
                p2 = dealAngle(angle + 120),
                p3 = dealAngle(angle - 120);

            let point1 = [x + Math.sin(p1) * r * 2, y - Math.cos(p1) * r * 2],
                point2 = [x + Math.sin(p2) * r * 2, y - Math.cos(p2) * r * 2],
                point3 = [x + Math.sin(p3) * r * 2, y - Math.cos(p3) * r * 2];


            canvas.ctx.moveTo(...point1);
            canvas.ctx.lineTo(...point2);
            canvas.ctx.lineTo(...point3);
            canvas.ctx.closePath();
        }

        /*
        * 画三角形
        * */
       /* function drawTriangle(p1,p2,p3){
            canvas.ctx.moveTo(...p1);
            canvas.ctx.lineTo(...p2);
            canvas.ctx.lineTo(...p3);
            canvas.ctx.closePath();
        }*/

        //计算坐标点度数
        function dealAngle(num){
            if(num < 0){
                return (num + 360) * (2*Math.PI / 360)
            }else if(num > 360){
                return (num - 360) * (2*Math.PI / 360)
            }else{
                return num * (2*Math.PI / 360)
            }
        }

        /*
        * --监听鼠标事件
        * */
        /*canvas.obj.addEventListener('mousedown', function(e){
            flag = true;
            mouse.x = e.offsetX; // 鼠标落下时的X
            mouse.y = e.offsetY; // 鼠标落下时的Y
        })

        canvas.obj.addEventListener('mouseup', function(e){
            flag = false;
            //url = canvas.obj.toDataURL(); // 每次 mouseup 都保存一次画布状态
        })

        canvas.obj.addEventListener('mousemove', function(e){
            mouse.x = e.offsetX; // 鼠标落下时的X
            mouse.y = e.offsetY; // 鼠标落下时的Y
            drawPencil(e); // 绘制方法
        })*/

        /*
        *  画线
        * */
        function drawPencil(e){
            if(flag){
                canvas.ctx.lineTo(e.offsetX,e.offsetY);
                canvas.ctx.stroke(); // 调用绘制方法
            }else{
                canvas.ctx.beginPath();
                canvas.ctx.moveTo(mouse.x, mouse.y);
            }
        }


    })()

</script>

</html>